<template>
  <van-popup
  v-model="showSelectPasterFlag"
  position='bottom'
  :round="true"
  get-container="body"
  @close="handleClose">
    <div class="background-container" style="padding-bottom: 24px;">
      <!-- 头部导航栏 -->
      <div class="header-content">
        <!-- tab栏 -->
        <div class="tab-content">
          <van-tabs
            v-model="active"
            line-width="16"
            sticky
            change="changeTab">
            <van-tab
              v-for="item in tabNav"
              :key="item.id"
              :title="item.name">
            </van-tab>
          </van-tabs>
        </div>

        <!-- 商店和关闭弹窗 -->
        <div class="operation-content">
          <img v-if="active === 1 && !showDelete" @click="showDelete = !showDelete" class="operation-icon" src="@/assets/images/delete-icon1.png" alt="">
          <img v-if="active === 1 && showDelete" @click="showDelete = !showDelete" class="operation-icon" src="@/assets/images/delete-success.png" alt="">
          <img @click="handleClose" class="operation-icon" src="@/assets/images/ic_btn_fold.png" alt="">
        </div>
      </div>
      <!-- 内容选择 lazy-load-->
      <van-tabs
        v-if="active === 0"
        class="image-content"
        line-width="0"
        line-height="0">
        <van-tab
          v-for="item in materialList"
          :key="item.id"
          :title="item.category_name">
          <van-row type="flex" gutter="12" justify="start">
            <van-col
              v-for="sub_item in item.materialList"
              :key="sub_item.id"
              span="6"
              class="image-item">
              <van-image
                class="img-cover"
                radius="6"
                lazy-load
                fit="contain"
                :src="sub_item.cover_url"
                @click="setPaster(sub_item)"
              />
            </van-col>
          </van-row>
        </van-tab>
      </van-tabs>

      <!-- 我的贴纸 -->
      <div v-else class="image-content" style="padding-top: 12px;">
        <van-row type="flex" gutter="12" justify="start">
          <van-col span="6" class="image-item">
            <van-uploader :after-read="h5UploadBackgroundImage" />
          </van-col>
          <van-col
            v-for="sub_item in userAllMaterialListData"
            :key="sub_item.id"
            span="6"
            class="image-item">
            <van-image
              class="img-cover"
              width="80px"
              height="80px"
              radius="6"
              lazy-load
              fit="contain"
              :src="sub_item.cover_url"
              @click="setPaster(sub_item)">
              <template v-if="showDelete" v-slot:default>
                <div @click.stop="handleDelete(sub_item)" class="delete-container" style="position: absolute;left: 0;right: 0;top: 0;right: 0;bottom: 0;margin: auto;background: rgba(0, 0, 0, .4);color: #fff;display: flex;align-items: center;justify-content: center;">删除</div>
              </template>
            </van-image>
          </van-col>
        </van-row>
      </div>

    </div>
  </van-popup>
</template>

<script>
import pasterListData from '@/assets/utils/paster';
import { getAllMaterialListByCategoryId, createUserMaterial, userAllMaterialList, deleteUserMaterial } from '@/utils/api';
export default {

  data() {
    return {
      active: 0,
      tabNav: [{
        name: '公共贴纸',
        id: 1
      }],
      materialList: [],
      pasterListData: pasterListData,
      showSelectPasterFlag: false,
      userAllMaterialListData: [],
      showDelete: false
    };
  },

  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector('#footer-container');
        if (val === 'paster') {
          footerContainerEl.style.zIndex = '999';
          this.showSelectPasterFlag = !this.showSelectPasterFlag;
        } else if (oldVal === 'paster') {
          this.showSelectPasterFlag = false;
        }
      } 
    },
    '$store.state.user.token': {
      immediate: true,
      handler(val) {
        if (val) {
          this.getUserAllMaterialList();
        }
      }
    }
  },

  created() {
    console.log('激活activated,挂件');
    this.getAllMaterialList();
  },

  methods: {

    // 点击删除
    handleDelete(itemData) {
      console.log(itemData)
      deleteUserMaterial({ id: itemData.id }).then(result => {
        if (result && result.code === 200) {
          this.getUserAllMaterialList();
          this.$toast({
            message: '删除成功！',
            position: 'center',
          });
        }
      })
    },

    // h5上传底图图片
    h5UploadBackgroundImage(files) {
      this.handAccountCanvas.h5Upload(files).then(result => {
        let image = result.cover_path;
        createUserMaterial({
          material_img_cover_url: image
        }).then(result => {
          if (result && result.code === 200) {
            this.getUserAllMaterialList();
            this.$toast({
              message: '添加成功！',
              position: 'center',
            });
          }
        })
      });
    },

    // 获取创作者的素材列表
    getUserAllMaterialList() {
      let paramsObject = this.$store.state.user.queryParams;
      if (paramsObject && paramsObject.author_id) {
        userAllMaterialList().then(result => {
          if (result && result.data && result.data.length > 0) {
            let list = result.data;
            list.forEach(item => {
              item.cover_url = item.material_img_cover_url;
            })
            this.userAllMaterialListData = result.data;
          } else {
            this.userAllMaterialListData = [];
          }
        })
      }
    },

    // 获取贴纸
    getAllMaterialList() {
      let paramsObject = this.$store.state.user.queryParams;
      if (paramsObject) {
        getAllMaterialListByCategoryId().then(result => {
          if (result && result.data && result.data.length > 0) {
            this.materialList = result.data;
          }
        })
      }
    },

    // 设置贴纸
    setPaster(item) {
      this.handAccountCanvas.addImage({
        options: {
          elType: 'paster',
          id: item.id
        },
        uri: item.cover_url
      })
      // 设置成功之后关闭弹窗
      this.handleClose();
    },

    // 关闭弹窗
    handleClose() {
      this.active = 0;
      this.showDelete = false;
      this.showSelectPasterFlag = false;
      this.$emit('onClose', 'paster');
      this.handAccountCanvas.discardActiveObject();
    },
  }
};
</script>

<style lang="less" scoped>
  .background-container{
    height: 68vh;
    width: 100vw;
    padding-bottom: 68px;
    display: flex;
    flex-direction: column;

    .header-content{
      display: flex;
      width: 100vw;
      height: 58px;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
    }

    .tab-content{
      width: 280px;
    }

    .operation-content{
      display: flex;
      flex: 1;
      padding: 0 8px;
      justify-content: space-around;
      position: relative;

      &::before{
        display: block;
        content: "";
        height: 24px;
        width: 1px;
        background: #eaeaea;
        position: absolute;
        top: 0;
        left: 5px;
        bottom: 0;
        margin: auto;
      }

      .operation-icon{
        width: 20px;
        height: 20px;
        display: block;
      }
    }

    .image-content{
      flex: 1;
      overflow: hidden;
      position: relative;
      padding: 0 12px 0 12px;
      display: flex;
      flex-direction: column;

      .image-item{
        margin-bottom: 12px;
        position: relative;
      }

      .img-cover{
        width: 80px;
        height: 80px;
        background: #eaeaea;
        border: 1px solid #eaeaea;
      }

      .delete-container{
        position: absolute;
        width: 80px;
        height: 80px;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        border-radius: 6px;
        margin: auto;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>

<style lang="less">
  .image-content{

    .van-tabs__wrap{
      width: 100%;
      height: 48px;

      .van-tab{
        padding: 0 4px;

        .van-tab__text{
          font-size: 12px;
          background: #eaeaea;
          height: 24px;
          line-height: 24px;
          padding: 0 12px;
          border-radius: 12px;
        }
      }

      .van-tab--active{

        .van-tab__text{
          background: #8da6ef;
          color: #fff;
        }
      }
    }

    .van-tabs__content{
      width: 100%;
      height: calc(100% - 48px);
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
</style>
